<template>
  <div class="detail-wrapper">
    <div class="detail-main">
      <div class="detail-column">
        <div class="column-title">设备信息</div>
        <div class="column-content">
          <a-descriptions
            bordered
            :labelStyle="{ width: '120px' }"
            :contentStyle="{ width: '500px' }"
            :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }"
            :loading="loading"
          >
            <a-descriptions-item label="设备名称">
              {{ instrumentData.name || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="仪器分类">
              {{ instrumentData.instrument_category_name || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="点击次数">
              {{ instrumentData.click_count || 0 }}
            </a-descriptions-item>
            <a-descriptions-item label="设备状态">
                {{ instrumentData.enabled ? '启用' : '禁用' }}
            </a-descriptions-item>
            <a-descriptions-item label="创建时间">
              {{ instrumentData.created || '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="更新时间">
              {{ instrumentData.updated || '-' }}
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
      <div class="detail-column" v-if="instrumentData.model_url">
        <div class="column-title">预览模型</div>
        <div class="column-content">
          <a :href="instrumentData.model_url" target="_blank">
            <a-button :icon="h(DownloadOutlined)" type="primary">下载模型</a-button>
          </a>
        </div>
      </div>
      <div class="detail-column" v-if="instrumentData.music_url">
        <div class="column-title">背景音乐</div>
        <div class="column-content">
          <a :href="instrumentData.music_url" target="_blank">
            <a-button :icon="h(DownloadOutlined)" type="primary">下载音乐</a-button>
          </a>
        </div>
      </div>
      <div class="detail-column" v-if="instrumentData.thumb_url">
        <div class="column-title">预览图片</div>
        <div class="column-content">
          <img 
            :src="instrumentData.thumb_url" 
            alt="仪器图片" 
            style="max-width: 400px; max-height: 300px; object-fit: contain; border-radius: 4px; margin-bottom: 16px;"
          />
          <br>
          <a :href="instrumentData.thumb_url" target="_blank">
            <a-button :icon="h(DownloadOutlined)" type="primary">下载图片</a-button>
          </a>
        </div>
      </div>
      <div class="detail-column">
        <div class="column-title">仪器介绍</div>
        <div class="column-text" v-html="formatText(instrumentData.introduce) || '暂无介绍'">
        </div>
      </div>
      <div class="detail-column">
        <div class="column-title">实验内容</div>
        <div class="column-text" v-html="formatText(instrumentData.experiment) || '暂无实验内容'">
        </div>
      </div>
      <div class="detail-column">
        <div class="column-title">企业信息</div>
        <div class="column-text" v-html="formatText(instrumentData.company_info) || '暂无厂商信息'">
        </div>
      </div>
      <div class="detail-column">
        <div class="column-title">配置参数</div>
        <div class="column-text" v-html="formatText(instrumentData.remark) || '暂无备注'">
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, computed, h, onMounted } from "vue";
import { DownloadOutlined } from "@ant-design/icons-vue";
import { useRoute } from "vue-router";
import { message } from "ant-design-vue";
import administratorApi from "@/api/administrator";

const route = useRoute();
const instrumentData = ref({});
const loading = ref(false);

// 格式化文本，处理换行符
const formatText = (text) => {
  if (!text) return '';
  return text.replace(/\r\n/g, '<br>').replace(/\n/g, '<br>').replace(/\r/g, '<br>');
};

// 获取仪器详情
const fetchInstrumentDetail = async () => {
  const instrumentId = route.query.instrument_id;
  if (!instrumentId) {
    message.error('缺少必要参数：instrument_id');
    return;
  }

  loading.value = true;
  try {
    const res = await administratorApi.InstrumentDetail({
      instrument_id: instrumentId
    });
    
    if (res) {
      instrumentData.value = res;
    } else {
      message.error(res?.errors || "获取设备详情失败");
    }
  } catch (error) {
    console.error("获取设备详情失败", error);
    message.error("获取设备详情失败");
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  fetchInstrumentDetail();
});
</script>

